body {
	padding: 0px;
	margin: 0px;
	height: 100%;
	overflow: hidden;
	background-color: #01070B;
}

.swiper-container {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#framemark {
	top: 5%;
	left: 0px;
	width: 100%;
	position: relative;
	position: absolute;
	overflow: hidden;
	height: 94%;
	display: none;
	z-index: 2;
	opacity: 0.9;
}

@keyframes mk {
	0% {
		transform: translateY(-100%);
		opacity: 0.8;
	}
	100% {
		transform: translateY(0%);
		opacity: 0.3;
	}
}

@-webkit-keyframes mk {
	0% {
		-webkit-transform: translateY(-100%);
		opacity: 0.8;
	}
	100% {
		-webkit-transform: translateY(0%);
		opacity: 0.3;
	}
}

#framemark img {
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
}

#framemark img.mv {
	animation: mk 0.4s infinite;
	-webkit-animation: mk 0.4s infinite;
}

#framemark img.mv2 {
	animation: mk 1s infinite;
	-webkit-animation: mk 1s infinite;
}

.swiper-slide {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#page {
	width: 100%;
	margin: 0px auto;
}

.page {
	position: relative;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

@font-face {
	font-family: 'zt';
	src: url('../font/zt.ttf') format('truetype');
}

.load_page {
	background-image: url(../img/bg.jpg);
	background-size: 100% 100%;
	text-align: center;
	display: none;
}

@keyframes ld {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes ld {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

.load_page .ico {
	animation: ld 8s infinite linear;
	-webkit-animation: ld 8s infinite linear;
	width: 80px;
	height: 80px;
	margin: 55% auto;
	margin-bottom: 0px;
}

.load_page p {
	color: #c9e5fe;
	font-size: 18px;
	line-height: 30px;
	margin-top: 10px;
	font-family: 'zt';
	padding-top: 25px;
	background-image: url(../img/load_bg.png);
	background-position: top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	padding-bottom: 90px;
}

.load_page p b,
.load_page p span {
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}

.frame {
	position: relative;
}

.frame div {
	position: absolute;
	opacity: 0;
	top: 0px;
	transform: translateY(-50px);
	-webkit-transform: translateY(-50px);
	left: 0px;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
}

@keyframes loadmv {
	0% {
		opacity: 0;
		transform: translateY(-50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@-webkit-keyframes loadmv {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-50px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0px);
	}
}

.frame div.mv {
	display: block;
	opacity: 1;
	animation: loadmv .2s both;
	-webkit-animation: loadmv .2s both;
}

.lines {
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

@keyframes ls {
	0% {
		transform: translate(-20px, -20px);
	}
	19% {
		transform: translate(-20px, -20px);
	}
	20% {
		transform: translate(-10px, 10px);
	}
	39% {
		transform: translate(-10px, 10px);
	}
	40% {
		transform: translate(5px, 0px);
	}
	59% {
		transform: translate(5px, 0px);
	}
	60% {
		transform: translate(-15px, -10px);
	}
	79% {
		transform: translate(-15px, -10px);
	}
	80% {
		transform: translate(0px, 20px);
	}
	99% {
		transform: translate(0px, 20px);
	}
	100% {
		transform: translate(15px, 10px);
	}
}

@-webkit-keyframes ls {
	0% {
		-webkit-transform: translate(-20px, -20px);
	}
	19% {
		-webkit-transform: translate(-20px, -20px);
	}
	20% {
		-webkit-transform: translate(-10px, 10px);
	}
	39% {
		-webkit-transform: translate(-10px, 10px);
	}
	40% {
		-webkit-transform: translate(5px, 0px);
	}
	59% {
		-webkit-transform: translate(5px, 0px);
	}
	60% {
		-webkit-transform: translate(-15px, -10px);
	}
	79% {
		-webkit-transform: translate(-15px, -10px);
	}
	80% {
		-webkit-transform: translate(0px, 20px);
	}
	99% {
		-webkit-transform: translate(0px, 20px);
	}
	100% {
		-webkit-transform: translate(15px, 10px);
	}
}

.lines img {
	animation: ls 2s infinite;
	-webkit-animation: ls 2s infinite;
	width: 100%;
	height: 100%;
}

.page1 {
	display: none;
	background-color: rgba(0, 0, 0, 0.8);
	color: #fff;
	text-align: center;
}

.page1 img {
	width: 100%;
}

.page1 #jiaopian {
	width: 60px;
	height: 60px;
	margin: 30px auto !important;
	margin-bottom: 10px;
	opacity: 1 !important;
	animation: ld 8s infinite linear;
	-webkit-animation: ld 8s infinite linear;
}

#txt_box {
	height: 55%;
	position: relative;
	position: absolute;
	top: 23%;
	width: 100%;
	text-align: left;
	left: 0px;
	overflow: hidden;
}

@keyframes txt {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0%);
	}
}

@-webkit-keyframes txt {
	0% {
		-webkit-transform: translateY(100%);
	}
	100% {
		-webkit-transform: translateY(0%);
	}
}

#txt_box img {
	position: absolute;
	animation: txt 10s both linear;
	-webkit-animation: txt 10s both linear;
}

.tt1 {
	width: 100%;
	position: absolute;
	top: 10%;
}

.tt2 {
	width: 100%;
	top: 20%;
}

.pagenew.page {
	background-image: url(../img/bg_new.jpg?t=12);
	background-size: 100% 100%;
}

img.txt_new {
	width: 100%;
	top: 10%;
	position: absolute;
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
}

.page1 .pagebtn {
	position: absolute;
	top: 85%;
}

@keyframes txtmv {
	0% {
		margin-top: 40px;
		opacity: 0;
	}
	100% {
		margin-top: 5px;
		opacity: 1;
	}
}

@-webkit-keyframes txtmv {
	0% {
		margin-top: 40px;
		opacity: 0;
	}
	100% {
		margin-top: 5px;
		opacity: 1;
	}
}

.page1 img.mv {
	animation: txtmv .4s both;
	-webkit-animation: txtmv .4s both;
}

.page2 {}

.page2 img {
	position: absolute;
}

@keyframes tt3 {
	from {
		transform: translateY(-100px);
	}
	to {
		transform: translateY(0px);
	}
}

@-webkit-keyframes tt3 {
	from {
		-webkit-transform: translateY(-100px);
	}
	to {
		-webkit-transform: translateY(0px);
	}
}

.page2 .t1.mv,
.page3 .t1.mv {
	animation: tt3 .8s both;
	-webkit-animation: tt3 .8s both;
}

.page2 .t1 {
	width: 100%;
	top: 5%;
	transform: translateY(-120px);
	-webkit-transform: translateY(-120px);
}

.page2 .t2 {
	width: 100%;
	top: 27%;
	z-index: 5;
	animation: shak 1s infinite linear;
	-webkit-animation: shak 1s infinite linear;
}

.page2 .t3 {
	width: 100%;
	top: 20%;
}

.page2 .t4 {
	width: 20%;
	top: 50%;
	left: 7%;
	animation: shak2 2s 0.5s infinite linear;
	-webkit-animation: shak2 2s 0.5s infinite linear;
}

.page2 .t5 {
	width: 100%;
	bottom: 0%;
	-webkit-transform: translateX(100%);
}

.page2 .t6 {
	width: 20%;
	right: 7%;
	top: 50%;
	animation: shak2 2s infinite linear;
	-webkit-animation: shak2 2s infinite linear;
}

.page2 .t7 {
	width: 19%;
	top: 14%;
	left: 46%;
	animation: ld 6s infinite linear;
	-webkit-animation: ld 6s infinite linear;
}

.page3 {}

.page3 img {
	position: absolute;
}

.page3 .t1 {
	width: 100%;
	top: 5%;
	transform: translateY(-120px);
	-webkit-transform: translateY(-120px);
}

.page3 .t2 {
	width: 20%;
	right: 7%;
	top: 50%;
	animation: shak2 2s 0.5s infinite linear;
	-webkit-animation: shak2 2s 0.5s infinite linear;
}

.page3 .t3 {
	width: 20%;
	left: 7%;
	top: 50%;
	animation: shak2 2s infinite linear;
	-webkit-animation: shak2 2s infinite linear;
}

@keyframes shak {
	0% {
		transform: scale(1, 1);
		opacity: 0.9;
	}
	50% {
		transform: scale(1.02, 1.02);
		opacity: 1;
	}
	100% {
		transform: scale(1, 1);
		opacity: 0.9;
	}
}

@-webkit-keyframes shak {
	0% {
		-webkit-transform: scale(1, 1);
		opacity: 0.9;
	}
	50% {
		-webkit-transform: scale(1.02, 1.02);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1, 1);
		opacity: 0.9;
	}
}

@keyframes shak2 {
	0% {
		transform: translateY(-15px);
	}
	50% {
		transform: translateY(15px);
	}
	100% {
		transform: translateY(-15px);
	}
}

@-webkit-keyframes shak2 {
	0% {
		-webkit-transform: translateY(-15px);
	}
	50% {
		-webkit-transform: translateY(15px);
	}
	100% {
		-webkit-transform: translateY(-15px);
	}
}

.page3 .t4 {
	top: 27%;
	z-index: 5;
	width: 100%;
	animation: shak 1s infinite linear;
	-webkit-animation: shak 1s infinite linear;
}

.page3 .t5 {
	width: 20%;
	top: 14%;
	left: 42%;
	transform-origin: bottom;
	-webkit-transform-origin: bottom;
}

.page3 .t5.t51 {
	width: 20%;
	top: 14%;
	left: 42%;
}

@keyframes t5l {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-20deg);
	}
}

@-webkit-keyframes t5l {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(-20deg);
	}
}

.page3 .t5.t51.mv {
	animation: t5l .5s both;
	-webkit-animation: t5l .5s both;
}

.page3 .t5.t52 {
	width: 20%;
	top: 14%;
	left: 42%;
}

.page3 .t5.t53 {
	width: 20%;
	top: 14%;
	left: 42%;
}

@keyframes t5r {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(20deg);
	}
}

@-webkit-keyframes t5r {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(20deg);
	}
}

.page3 .t5.t53.mv {
	animation: t5r .5s both;
	-webkit-animation: t5r .5s both;
}

@keyframes ttt1 {
	0% {
		transform: translateY(200px);
	}
	100% {
		transform: translateY(0px);
	}
}

@-webkit-keyframes ttt1 {
	0% {
		-webkit-transform: translateY(200px);
	}
	100% {
		-webkit-transform: translateY(0px);
	}
}

.page3 .t6 {
	width: 100%;
	bottom: 0px;
	-webkit-transform: translateX(100%);
}

.page2 .t5.mv,
.page3 .t6.mv {
	animation: ttt1 .8s both;
	-webkit-animation: ttt1 .8s both;
}

#music {
	display: inline-block;
	width: 30px;
	height: 25px;
	background-position: top;
	position: relative;
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 55;
}

#music .bo {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}

.page4 {
	background-image: url(../img/p4_bg.jpg);
	background-size: 100% 100%;
}

.page4 img {
	max-width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}

.page4 .t1 {
	top: 4%;
}

@keyframes lt1 {
	0% {
		transform: translateY(-100px);
	}
	100% {
		transform: translateY(0px);
	}
}

@-webkit-keyframes lt1 {
	0% {
		-webkit-transform: translateY(-100px);
	}
	100% {
		-webkit-transform: translateY(0px);
	}
}

.page4 .t1.mv {
	animation: lt1 1.5s both;
	-webkit-animation: lt1 1.5s both;
}

@keyframes lt2 {
	0% {
		transform: scale(0, 0);
	}
	80% {
		transform: scale(1.2, 1.2);
	}
	100% {
		transform: scale(1, 1);
	}
}

@-webkit-keyframes lt2 {
	0% {
		-webkit-transform: scale(0, 0);
	}
	80% {
		-webkit-transform: scale(1.2, 1.2);
	}
	100% {
		-webkit-transform: scale(1, 1);
	}
}

.page4 .t2 {
	top: 14%;
}

.page4 .t2.mv {
	animation: lt2 2s both;
	-webkit-animation: lt2 2s both;
}

.txt_new.mv {
	animation: lt2 2s both;
	-webkit-animation: lt2 2s both;
}

.page4 .t3 {
	top: 45%;
}

.page4 .t4 {
	top: 83%;
	width: 40%;
	left: 5%;
	display: none;
	animation: shak 1s infinite linear;
	-webkit-animation: shak 1s infinite linear;
}

.page4 .t5 {
	width: 40%;
	top: 83%;
	left: 55%;
	display: none;
	animation: shak 1s, .3s infinite linear;
	-webkit-animation: shak 1s 0.3s infinite linear;
}

.page4 .t4:active,
.page4 .t4:hover,
.page4 .t5:active,
.page4 .t5:hover {
	transform: scale(0.9, 0.9);
	-webkit-transform: scale(0.9, 0.9);
}

#sharemark {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 99;
	background-color: rgba(0, 0, 0, 0.7);
}

#sharemark img {
	width: 100%;
	margin-top: 10px;
}

@keyframes pd {
	0% {
		transform: translateY(-6px);
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		transform: translateY(6px);
		opacity: 0;
	}
}

@-webkit-keyframes pd {
	0% {
		-webkit-transform: translateY(-6px);
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		-webkit-transform: translateY(6px);
		opacity: 0;
	}
}

img.pointdown {
	width: 100%;
	position: absolute;
	top: 96%;
	width: 100%;
	-webkit-animation: pd 2s infinite;
	animation: pd 2s infinite;
	left: 0px;
}

.pbg {
	width: 100%;
	height: 100%;
}

@keyframes tlight {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes tlight {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}

.plight {
	width: 150%;
	top: 6%;
	left: -25%;
	-webkit-animation: tlight 10s infinite linear;
	animation: tlight 10s infinite linear;
}

@keyframes tpeo {
	0% {
		transform: translateX(-10px);
	}
	50% {
		transform: translateX(10px);
	}
	100% {
		transform: translateX(-10px);
	}
}

@-webkit-keyframes tpeo {
	0% {
		-webkit-transform: translateX(-10px);
	}
	50% {
		-webkit-transform: translateX(10px);
	}
	100% {
		-webkit-transform: translateX(-10px);
	}
}

.pbpeo {
	width: 100%;
	top: 40%;
	-webkit-animation: tpeo 2s infinite;
	animation: tpeo 2s infinite;
}

.pfront {
	width: 100%;
	height: 100%;
}

@keyframes hdmv {
	0% {
		transform: rotate(-15deg);
	}
	50% {
		transform: rotate(15deg);
	}
	100% {
		transform: rotate(-15deg);
	}
}

@-webkit-keyframes hdmv {
	0% {
		-webkit-transform: rotate(-15deg);
	}
	50% {
		-webkit-transform: rotate(15deg);
	}
	100% {
		-webkit-transform: rotate(-15deg);
	}
}

.head {
	width: 30%;
	left: 35%;
	bottom: 44%;
	transform-origin: bottom;
	-webkit-transform-origin: bottom;
	-webkit-animation: hdmv 5s infinite;
	animation: hdmv 5s infinite;
}

.pagenew img {
	position: absolute;
}

.gl2 {
	width: 30px;
	height: 500px;
	left: 7%;
}

.gl3 {
	width: 80px;
	bottom: 30%;
	opacity: 0.4;
	left: 15%;
}

.gl4 {
	width: 25px;
	height: 300px;
	bottom: 36%;
	left: 14%;
}

.gl5 {
	width: 40px;
	bottom: 55%;
	left: 30%;
}

.gl6 {
	width: 70px;
	left: 60%;
	bottom: 52%;
}
.gl7 {
	width: 70px;
	left: 80%;
  	bottom: 20%;
} 

@keyframes gdmv{
	0%{ transform: translateY(400px); }
	100%{ transform: translateY(0px);  } 
}
@-webkit-keyframes gdmv{
	0%{ -webkit-transform: translateY(400px); }
	100%{ -webkit-transform: translateY(0px);  }
}
.gd {
	bottom: 0px;
	width: 100%;
	left: 0;
	transform: translateY(400px);
	-webkit-transform: translateY(400px);
	
}
.gd.mv{
	animation: gdmv 0.5s both;
	-webkit-animation: gdmv 0.5s both;
}
.gl1 {
	width: 150px;
	bottom: 32%;
	left: 39%;
}
.gl2,.gl3,.gl4,.gl5,.gl6,.gl7{
	transform-origin: bottom;
	-webkit-transform-origin: bottom;
	display: none;
}
.gl1{
	transform-origin: 100% 100%;
	-webkit-transform-origin: 100% 100%;
	display: none;
}
@keyframes lmv{
	0%{ transform: rotate(-10deg); }
	50%{ transform: rotate(10deg); }
	100%{ transform: rotate(-10deg); } 
}
@-webkit-keyframes lmv{
	0%{ -webkit-transform: rotate(-10deg); }
	50%{ -webkit-transform: rotate(10deg); }
	100%{ -webkit-transform: rotate(-10deg); } 
}
.gl1.mv,.gl2.mv,.gl3.mv,.gl4.mv,.gl5.mv,.gl6.mv,.gl7.mv{
	display: block;
	animation: lmv 3s infinite;
	-webkit-animation: lmv 3s infinite;
}
